html {
    background: #444;
}

body {
    margin: 0;
    background: #fff;
    color: #333;
    font-family: 'Hiragino Sans GB', 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size: inherit;
}

ul, ol {
    list-style-type: none;
}

img {
    border: none;
    vertical-align: top;
}

a {
    text-decoration: none;
    color: #08c;
    transition-duration: 0.35s;
}

a:hover {
    text-decoration: underline;
    color: #f16529 !important;
}

/* 字体图标 */
@font-face {
    font-family: 'iconfont';
    src: url('../fonts/iconfont.eot');
    src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/iconfont.ttf') format('truetype'),
    url('../fonts/iconfont.woff') format('woff'),
    url('../fonts/iconfont.svg#iconfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* 淡入效果 */
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 清浮动 */
.clearfix:after {
    display: block;
    overflow: hidden;
    clear: both;
    height: 0;
    visibility: hidden;
    content: '.';
}

/* 分享图标 */
.share-ico {
    width: 38px;
    height: 38px;
    line-height: 38px;
    border: 1px solid #ccc;
    border-radius: 20px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.5;
    color: #666;
    font-size: 24px;
    text-align: center;
    font-family: 'iconfont';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.share-ico:hover {
    color: #fff !important;
    text-decoration: none;
    opacity: 1;
}

/* 微博分享图标 */
.share-ico--weibo:hover {
    border-color: #f53a24;
    background-color: #f53a24;
}

/* 微信分享图标 */
.share-ico--wechat:hover {
    border-color: #6fc107;
    background-color: #6fc107;
}

/* 分享按钮 */
.share-btn {
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    padding: 0 20px;
    display: inline-block;
    color: #fff;
}

.share-btn:hover {
    color: #fff !important;
    text-decoration: none;
}

.share-btn__ico {
    font-family: 'iconfont';
    font-size: 20px;
    margin-right: 0.3em;
}

.share-btn--weibo {
    background-color: #f53a24;
}

.share-btn--wechat {
    background-color: #6fc107;
}

/* 微信分享弹层 */
.share-wechat {
    width: 128px;
    height: 186px;
    padding: 10px 15px;
    margin-left: -79px;
    margin-top: -103px;
    top: 50%;
    left: 50%;
    position: fixed;
    z-index: 12000;
    background: #fff;
    text-align: center;
    line-height: 21px;
}

.share-wechat__qrcode {
    margin: 8px 0;
}

.share-wechat__qrcode img {
    width: 128px;
    height: 128px;
}

.share-wechat__close {
    font-size: 12px;
}

.share-wechat--inwechat {
    color: #fff;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 12000;
}

.share-wechat--inwechat__text {
    float: left;
    margin-top: 8px;
    line-height: 22px;
    text-align: center;
    font-size: 16px;
}

.share-wechat--inwechat__arrow {
    float: right;
    margin: 0 22px 0 10px;
}

.share-wechat--inwechat__arrow__triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid #fff;
    display: block;
}

.share-wechat--inwechat__arrow__rectangle {
    background: #fff;
    width: 10px;
    height: 15px;
    margin: 0 auto;
    display: block;
}

/* 表单布局 */
.form-layout__row {
    clear: both;
    margin: 15px 0;
}

.form-layout__col {
    float: left;
}

.form-layout__row--3cols .form-layout__col {
    width: 33%;
}

.form-layout__row--3cols .form-layout__col:first-child {
    width: 34%;
}

.form-item__label {
    margin: 0 3px 5px 3px;
}

.form-item__label__tips {
    font-size: 12px;
    color: #999;
}

.form-item__label__tips--required {
    color: #80bd01;
}

.form-item .textbox {
    width: 100%;
}

/* 普通按钮 */
.btn {
    background: #08c;
    border-radius: 4px;
    padding: 0 1.3em;
    border: none;
    height: 2.3em;
    line-height: 2.3em;
    display: inline-block;
    color: #fff;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
}

.btn:hover {
    color: #fff !important;
}

/* 表单控件 */
.textbox {
    font-family: inherit;
    font-size: inherit;
    border: none;
    background: #fcfcfc;
    margin: 0;
    padding: 0.5em;
    outline: none;
    color: inherit;
    border: 1px solid #ddd;
    transition-duration: 0.4s;
    box-sizing: border-box;
    border-radius: 4px;
}

.textbox:focus {
    border-color: #aaa;
    background: #fff;
}

textarea.textbox {
    line-height: 1.5;
    resize: none;
}

/* 分页条 */
.paginator {
    width: 100%;
    margin-top: 2.5em;
    position: relative;
    font-family: Tahoma;
    text-align: center;
}

.paginator__item {
    margin: 0 0.5em;
    display: inline-block;
}

.paginator__item__text {
    width: 2.2em;
    height: 2.2em;
    line-height: 2.2em;
    border-radius: 1.2em;
    border: 1px solid #eee;
    display: block;
    color: #999;
}

a.paginator__item__text:hover {
    border-color: #999;
    color: #666 !important;
    text-decoration: none;
}

.paginator__item--current .paginator__item__text {
    background: #80bd01;
    border-color: #80bd01;
    color: #fff;
}

.paginator__item--prev, .paginator__item--next {
    position: absolute;
    top: 0;
    margin: 0;
}

.paginator__item--prev {
    left: 0;
}

.paginator__item--next {
    right: 0;
}

.paginator__item--prev--disabled,
.paginator__item--next--disabled {
    display: none;
}

.paginator__item__text__icon {
    font-family: 'iconfont';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.paginator__item--ellipsis {
    margin-left: 0;
    margin-right: 0;
}

.paginator__item--ellipsis .paginator__item__text {
    border: none;
}

.paginator__item--ellipsis .paginator__item__text__icon:before {
    content: '\e606';
}

.paginator__item--prev .paginator__item__text__icon:before {
    content: '\e618';
}

.paginator__item--next .paginator__item__text__icon:before {
    content: '\e617';
}

/* 限定左右空白 */
.boundary {
    margin: 0 40px;
    box-sizing: border-box;
}

.container {
    background: #f8f8f8;
}

.container__boundary {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.main, .sidebar {
    padding: 40px;
    box-sizing: border-box;
}

/* 页头 */
.header {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid #eee;
}

.header a {
    text-decoration: none;
}

.header__logo img {
    height: 100%;
}

.header__nav__list-item a {
    padding: 0 1em;
    height: 100%;
    display: block;
    overflow: hidden;
    color: #999;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header__nav__list-item--current a {
    color: #333;
}

.header__user-panel {
    max-width: 180px;
}

.header__user-panel__menu li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header__user-panel__menu__item__admin {
    font-size: 12px;
    color: #999;
}

.header__user-panel__menu__item__admin em {
    color: #f53a24;
}

.header__user-panel__menu__item__admin__pending-reviews {
    display: none;
}

/* 主体左栏 */
.main {
    background: #fff;
}

/* 侧栏模块 */
.sidebar__section {
    margin-top: 30px;
}

.sidebar__section:first-child {
    margin-top: 0;
}

.sidebar__section__title {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    line-height: 28px;
}

.sidebar__article-list li {
    margin-top: 0.6em;
    padding-bottom: 0.6em;
    border-bottom: 1px dotted #ccc;
    line-height: 1.5;
}

.sidebar__article-list li:first-child {
    margin-top: 0;
}

.sidebar__link-list {
    line-height: 1.5;
}

.sidebar__link-list dt {
    margin-top: 0.7em;
}

.sidebar__link-list dt:first-child {
    margin-top: 0;
}

.sidebar__link-list dd {
    color: #999;
    font-size: 12px;
}

/* 页脚 */
.footer {
    padding: 30px 0;
    background: #444;
    font-size: 12px;
    color: #fafafa;
}

.footer a {
    color: #fafafa;
}

.footer a:hover {
    color: #fafafa !important;
}

.footer__col-left {
    line-height: 1.6;
}

.footer__col-right {
    line-height: 63px;
}

.footer__col-right a {
    font-size: 30px;
}

.footer__nav {
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}

.footer__nav li {
    float: left;
    margin-left: 1.5em;
}

.footer__nav li:first-child {
    margin-left: 0;
}

.footer__nodejs-logo {
    width: 150px;
    height: 63px;
    vertical-align: -13px;
    margin-left: 0.5em;
}

/* 文章内容 */
.article__content {
    font-size: 16px;
}

/* 文章列表中的每篇文章 */
.article-list__item {
    padding-bottom: 12px;
    margin-top: 35px;
    border-bottom: 1px solid #eee;
}

.article-list__item:first-child {
    margin-top: 0;
}

.article-list__item:last-child {
    border-bottom: none;
}

.article-list__item__header {
    line-height: 28px;
}

.article-list__item__header__title {
    font-size: 22px;
    font-weight: bold;
    font-family: 'PingHei', 'Microsoft JhengHei', 'Microsoft YaHei', STHeiti, SimHei;
}

.article-list__item__header__title a {
    color: #000;
}

.article-list__item__header__title a:hover {
    color: #000 !important;
}

.article-list__item__header__meta {
    font-size: 14px;
    color: #aaa;
}

.article-list__item__summary {
    color: #666;
    margin-top: 25px;
}

.article-list__item__footer {
    margin-top: 25px;
}

.article-list__item__footer_info {
    float: left;
    padding-top: 12px;
    font-size: 12px;
    color: #aaa;
    line-height: 24px;
}

.article-list__item__footer_info em {
    margin-right: 2px;
    color: #333;
    font-size: 14px;
}

.article-list__item__footer__share {
    float: right;
}

.article-list__item__footer__share .share-ico {
    float: left;
    margin-left: 0.5em;
}

@media (min-width: 1441px) {
    .boundary {
        width: 1280px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 页头页脚左右空出位置与主体内容对齐 */
    .header_boundary, .footer__boundary {
        padding: 0 40px;
    }
}

@media (min-width: 960px) {
    .header {
        width: 100%;
        height: 80px;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 9999;
    }

    .header__logo {
        float: left;
        height: 46px;
        padding: 17px 0;
        font-size: 30px;
    }

    .header__nav {
        float: left;
        margin-left: 30px;
    }

    .header__nav__toggle {
        display: none;
    }

    .header__nav__list-item {
        float: left;
        height: 80px;
        line-height: 80px;
        margin-left: 14px;
        overflow: hidden;
    }

    .header__nav__list-item a {
        max-width: 80px;
    }

    .header__nav__list-item a:hover {
        color: #333 !important;
    }

    .header__nav__list-item--current {
        height: 79px;
        border-bottom: 2px solid #333;
        z-index: 1000;
    }

    .header__user-panel {
        max-width: 180px;
        float: right;
        padding: 15px 0;
        line-height: 50px;
    }

    .header__user-panel__toggle {
        display: none;
    }

    .header__user-panel__menu {
        line-height: 25px;
    }

    /* 空出页头高度 */
    .container {
        padding-top: 81px;
    }

    .main {
        width: 70%;
        float: left;
    }

    .sidebar {
        width: 30%;
        float: right;
    }

    .footer__col-left {
        float: left;
    }

    .footer__col-right {
        float: right;
    }

    .article-list__item__header__title {
        float: left;
        width: 70%;
    }

    .article-list__item__header__meta {
        float: right;
        width: 25%;
        text-align: right;
        overflow: hidden;
    }
}

@media (min-width: 960px) and (max-width: 1000px) {
    .header__user-panel {
        max-width: 150px;
    }
}

@media (min-width: 768px) and (max-width: 1099px) {
    .boundary {
        margin-left: 30px;
        margin-right: 30px;
    }

    .main, .sidebar {
        padding: 30px;
    }

    .header__nav__list-item a {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
}

@media (max-width: 959px) {
    body {
        background: #fff;
    }

    .header {
        height: 70px;
    }

    .header__logo {
        height: 42px;
        padding: 14px 0;
        text-align: center;
        font-size: 20px;
    }

    .header__nav__toggle,
    .header__user-panel__toggle,
    .header__user-panel__login {
        line-height: 70px;
        position: absolute;
        top: 0;
    }

    .header__nav__toggle, .header__user-panel__toggle {
        display: block;
        cursor: pointer;
        color: #999;
        font-size: 28px;
        font-family: 'iconfont';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .header__nav__toggle {
        left: 30px;
        transition-duration: 0.4s;
    }

    .header__nav__toggle--on {
        color: #08c;
    }

    .header__nav__list, .header__user-panel__menu {
        width: 100%;
        position: absolute;
        top: 71px;
        left: 0;
        background: rgba(255, 255, 255, 0.95);
        border-bottom: 1px solid #eee;
        display: none;
    }

    .header__nav__list--on, .header__user-panel__menu--on {
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
        -webkit-animation-duration: 0.4s;
        -webkit-animation-fill-mode: both;
        animation-duration: 0.4s;
        animation-fill-mode: both;
        display: block;
    }

    .header__nav__list-item {
        width: 25%;
        height: 50px;
        line-height: 50px;
        box-sizing: border-box;
        margin: 0;
        float: left;
        text-align: center;
    }

    .header__user-panel__login {
        line-height: 70px;
        top: 0;
        position: absolute;
    }

    .header__user-panel__toggle, .header__user-panel__login {
        right: 30px;
    }

    .header__user-panel__toggle {
        transition-duration: 0.4s;
    }

    .header__user-panel__toggle--on {
        color: #08c;
    }

    .header__user-panel__menu {
        padding: 0.5em 0;
        text-align: right;
    }

    .header__user-panel__menu li {
        padding: 0 30px;
        line-height: 25px;
        word-spacing: 0.5em;
    }

    .sidebar {
        background: #f8f8f8;
    }

    .footer__col-right {
        margin-top: 0.5em;
    }

    .article-list__item__header__meta {
        margin-top: 0.5em;
    }
}

@media (max-width: 767px) {
    .paginator__item {
        margin-left: 0.2em;
        margin-right: 0.2em;
    }

    .boundary {
        margin-left: 20px;
        margin-right: 20px;
    }

    .main, .sidebar {
        padding: 30px 20px;
    }

    .header__nav__toggle {
        left: 20px;
    }

    .header__user-panel__toggle, .header__user-panel__login {
        right: 20px;
    }
}